import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/// 创建人： Created by zhaolong
/// 创建时间：Created by  on 3/10/21.
///
/// 可关注公众号：我的大前端生涯   获取最新技术分享
/// 可关注网易云课堂：https://study.163.com/instructor/1021406098.htm
/// 可关注博客：https://blog.csdn.net/zl18603543572
///
/// 代码清单
///画廊
///

main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: PageViewImagePage(),
  ));
}

class PageViewImagePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _PageViewImagePageState();
  }
}

class _PageViewImagePageState extends State {
  //控制器
  late PageController _pageController;

  late double _currentPage = 1.0;

  double fraction = 0.5;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(
      //初时显示的页面
      initialPage: 2,
      //每页大小
      viewportFraction: fraction,
    );
    _pageController.addListener(() {
      if (_pageController.hasClients) {
        setState(() {
          _currentPage = _pageController.page ?? 1.0;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("图片浏览器"),
      ),
      body: Center(
        child: AspectRatio(
          aspectRatio: 1,
          child: buildBody(),
        ),
      ),
    );
  }

  static const List<String> _imageList = [
    "assets/images/p1.webp",
    "assets/images/p2.webp",
    "assets/images/p3.webp",
    "assets/images/p1.webp",
    "assets/images/p2.webp",
    "assets/images/p3.webp",
  ];

  final List<Widget> _imageWidgetList = _imageList
      .map((e) => Image.asset(
            e,
            fit: BoxFit.fill,
          ))
      .toList();

  bool _hasLoading = false;

  buildBody() {
    return PageView.builder(
      onPageChanged: (int index) {
        print("当前选中 $index");
        setState(() {
          _hasLoading = true;
        });
      },
      //子Widget的个数
      itemCount: _imageWidgetList.length,
      controller: _pageController,
      //子Widget布局
      itemBuilder: (BuildContext context, int index) {
        double diff = index - _currentPage;

        Matrix4 pvMatrix4 = Matrix4.identity()
          ..setEntry(3, 3, 1 / 0.9)
          ..setEntry(1, 1, fraction)
          ..setEntry(3, 0, 0.004 * -diff);

        Matrix4 shadowMatrix4 = Matrix4.identity()
          ..setEntry(3, 3, 1 / 1.6)
          ..setEntry(3, 1, -0.004)
          ..setEntry(3, 0, 0.002 * -diff)
          ..rotateX(1.309);
        //动画构建器
        return Stack(
          fit: StackFit.expand,
          alignment: Alignment.center,
          children: [
            if (diff <= 1.0 && diff >= -1.0) ...[
              AnimatedOpacity(
                duration: Duration(milliseconds: 100),
                opacity: 1 - diff.abs(),
                child: Transform(
                  alignment: FractionalOffset.bottomCenter,
                  transform: shadowMatrix4,
                  child: Container(
                    decoration: const BoxDecoration(
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black12,
                            blurRadius: 10,
                            spreadRadius: 1)
                      ],
                    ),
                  ),
                ),
              ),
            ],
            Transform(
              alignment: FractionalOffset.center,
              transform: pvMatrix4,
              child: Container(child: _imageWidgetList[index]),
            )
          ],
        );
      },
    );
  }
}
